<template>
    <div>
        <van-form ref="form" colon @submit="$emit('confirm')">
            <van-nav-bar :title="title" left-text="取消" right-text="确认" @click-left="$emit('cancel')"
                @click-right="$refs.form.submit()" />
            <van-cell-group>
                <van-field v-model="inputForm.sequence" type="digit" label="序号" placeholder="请输入序号" />
                <van-field v-model="inputForm.title" label="名称" placeholder="请输入名称" :rules="[{ required: true }]" />
                <van-field v-model="inputForm.description" label="描述" placeholder="请输入描述"
                    :rules="[{ required: true }]" />
                <van-field readonly clickable is-link input-align="right" label="配置" :value="inputForm.modules"
                    @click="showPopup1 = true">
                    <template #input>编辑</template>
                </van-field>
              <van-field v-model="inputForm.level" type="digit" label="等级" placeholder="请输入等级" />
                <van-field readonly input-align="right" label="自动" :value="inputForm.autorun">
                    <template #input>
                        <van-switch v-model="inputForm.autorun" size="18px" />
                    </template>
                </van-field>
                <van-field readonly input-align="right" label="状态" :value="inputForm.enabled">
                    <template #input>
                        <van-switch v-model="inputForm.enabled" size="18px" />
                    </template>
                </van-field>
            </van-cell-group>
        </van-form>
        <van-popup v-model="showPopup1" position="bottom" :style="{ height: '80%' }">
            <van-nav-bar title="编辑配置" left-text="取消" right-text="确认" @click-left="showPopup1 = false"
                @click-right="showPopup1 = false" />
            <van-cell-group>
                <van-cell v-for="(_, index) in inputForm.modules" :key="index" :title="`模型${index + 1}`">
                    <span @click="onSelect(index)" style="color: #1989fa;cursor: pointer;">
                        <van-icon name="edit" />
                        <span>编辑</span>
                    </span>
                    <span @click="onDelete(index)" style="color: #ee0a24;cursor: pointer;">
                        <van-icon name="delete-o" />
                        <span>删除</span>
                    </span>
                </van-cell>
            </van-cell-group>
            <br />
            <div class="add-div">
                <van-button plain type="info" size="small" @click="onCreate">新增模型+</van-button>
            </div>
        </van-popup>
        <van-popup v-model="showPopup2" position="bottom" :style="{ height: '80%' }">
            <van-nav-bar title="编辑配置" left-text="重置" right-text="确认" @click-left="setOptions" @click-right="onSubmit" />
          <factor-form v-model="modelForm.d" period="d" :factorList="factorList" />
          <factor-form v-model="modelForm.w" period="w" :factorList="factorList" />
          <factor-form v-model="modelForm.m" period="m" :factorList="factorList" />
        </van-popup>
    </div>
</template>

<script>
import { getOptionsTarget } from '@/utils'
export default {
    components: {
        FactorForm: () => import('@/components/FactorForm.vue')
    },
    props: {
        title: String,
        resultForm: Object,
        factorList: Array
    },
    model: {
        prop: 'resultForm',
        event: 'change'
    },
    data() {
        return {
            activeIdx: null,
            activeTab: 'd',
            modelForm: {
                d: {},
                w: {},
                m: {}
            },
            inputForm: {
                title: null,
                sequence: 1,
                description: '暂无',
                modules: [],
                autorun: false,
                enabled: false,
                level: 1
            },
            showPopup1: false,
            showPopup2: false
        }
    },
    watch: {
        resultForm: {
            handler(newValue) {
                this.inputForm = newValue
            },
            immediate: true,
            deep: true
        },
        inputForm: {
            handler(newValue) {
                this.$emit('change', newValue)
            },
            immediate: true,
            deep: true
        }
    },
    methods: {
        getOptionsTarget: getOptionsTarget,
        getLabel(filed) {
            return getOptionsTarget(this.$types.relationTypes, 'value', filed, 'text')
        },
        getTitle(field, period) {
            for (let i = 0; i < this.factorList.length; i++) {
                if (this.factorList[i].field === field) {
                    if (this.factorList[i].typeof === 'string') {
                        return this.factorList[i].title
                    } else {
                        return getOptionsTarget(this.$types.periodTypes, 'value', period, 'text') + this.factorList[i].title
                    }
                }
            }
        },
        setOptions() {
            this.modelForm = {
                d: {},
                w: {},
                m: {}
            }
        },
        onCreate() {
            this.setOptions()
            this.showPopup2 = true
            this.activeIdx = null
        },
        onSelect(index) {
            this.activeIdx = index
            this.modelForm = this.inputForm.modules[index]
            this.showPopup2 = true
        },
        onDelete(index) {
            this.inputForm.modules.splice(index, 1)
        },
        onSubmit() {
            if (this.activeIdx === null) {
                this.inputForm.modules.push(this.modelForm)
            } else {
                this.inputForm.modules[this.activeIdx] = this.modelForm
            }
            this.showPopup2 = false
        }
    }
}
</script>

<style scoped>
.add-div {
    text-align: center;
}
</style>
